{% extends 'base/base.html' %}
{% load i18n %}

{% block title %}{{ project.name }} - 公告{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'projects:dashboard' %}">{% trans "仪表盘" %}</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'projects:project_detail' project.id %}">{{ project.name }}</a></li>
                    <li class="breadcrumb-item active">{% trans "公告" %}</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>
                    <i class="fa fa-bullhorn" aria-hidden="true"></i> {{ project.name }} - {% trans "公告" %}
                </h1>
                <a href="{% url 'projects:project_detail' project.id %}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left" aria-hidden="true"></i> {% trans "返回项目" %}
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            {% if announcements %}
                <div class="row">
                    {% for announcement in announcements %}
                        <div class="col-12 mb-4">
                            <div class="card border-0 shadow-sm hover-lift">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div>
                                            <h5 class="card-title mb-2 fw-bold">{{ announcement.title }}</h5>
                                            <div class="d-flex align-items-center gap-3 text-muted small">
                                                <span>
                                                    <i class="fa fa-user fa-xs me-1"></i>
                                                    {{ announcement.created_by.username }}
                                                </span>
                                                <span>
                                                    <i class="fa fa-clock fa-xs me-1"></i>
                                                    {{ announcement.created_at|date:"Y-m-d H:i" }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            {% if announcement.is_active %}
                                                <span class="badge bg-success-subtle text-success border border-success rounded-pill">
                                                    <i class="fa fa-check-circle fa-xs me-1"></i>
                                                    {% trans "已激活" %}
                                                </span>
                                            {% else %}
                                                <span class="badge bg-secondary-subtle text-secondary border border-secondary rounded-pill">
                                                    <i class="fa fa-times-circle fa-xs me-1"></i>
                                                    {% trans "未激活" %}
                                                </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    
                                    <div class="card-text mb-3">
                                        <p class="text-muted mb-0" style="line-height: 1.6;">
                                            {{ announcement.content|linebreaks }}
                                        </p>
                                    </div>
                                    
                                    {% if announcement.tags.all %}
                                        <div class="d-flex align-items-center gap-2">
                                            <small class="text-muted">{% trans "标签:" %}</small>
                                            <div class="d-flex flex-wrap gap-1">
                                                {% for tag in announcement.tags.all %}
                                                    <span class="badge rounded-pill" style="background-color: {{ tag.color }}; font-size: 0.75em;">
                                                        {{ tag.name }}
                                                    </span>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="d-flex align-items-center gap-2">
                                            <small class="text-muted">{% trans "范围:" %}</small>
                                            <span class="badge bg-secondary rounded-pill" style="font-size: 0.75em;">
                                                {% trans "全局公告" %}
                                            </span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-5">
                    <i class="fa fa-bullhorn" style="font-size: 4rem; color: #d9d9d9;"></i>
                    <h3 class="mt-4 text-muted">{% trans "暂无公告" %}</h3>
                    <p class="text-muted">{% trans "当前没有与您项目相关的公告" %}</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 添加悬停效果
    const announcementItems = document.querySelectorAll('.list-group-item');
    announcementItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
            this.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
            this.style.transition = 'all 0.3s ease';
        });
        
        item.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = 'none';
        });
    });
});
</script>
{% endblock %}